import { Breadcrumb, Button, Card, Dropdown, Table, Menu, Modal, Upload, Form, Input } from 'antd';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import genduo from '@assets/genduo.svg';
import './style.less';
import * as action from './store/action';
import moment from 'moment';

class index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      addFolderVisible: false,
      folderId: 0  // 当前文件目录id
    }
  }

  componentDidMount() {
    this.props.getRootFolder();
  }

  render() {

    const { addFolderVisible } = this.state;

    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '最后修改时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        render: (text) => {
          return moment(text.updateTime).format("yyyy-MM-DD HH:mm:ss");
        }
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type'
      },
      {
        title: '创建人',
        dataIndex: 'createBy',
        key: 'createBy'
      },
      {
        title: '',
        align: 'center',
        width: 50,
        render: (text) => {
          console.log(text);
          const menu = (
            <Menu>
              <Menu.Item>
                <span>下载</span>
              </Menu.Item>
              <Menu.Item>
                <span>重新命名</span>
              </Menu.Item>
              <Menu.Item onClick={() => this.props.deleteFolder(text.id)} >
                <span>删除</span>
              </Menu.Item>
            </Menu>
          );
          return (
            <Dropdown overlay={menu} trigger={['click']}>
              <img style={{ width: '80px', height: '20px', cursor: 'pointer' }} src={genduo} />
            </Dropdown>
          )
        }
      }
    ]

    const addFolder = (value) => {
      var data = {
        folderId: this.state.folderId,
        folderName: value.folderName
      }
      this.props.addFolder(data)
      this.setState({
        addFolderVisible: false
      })
    }

    return (
      <Card
        title="个人文件"
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
          <Breadcrumb >
            <Breadcrumb.Item>
              <a>Home</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a>Users</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a>Documents</a>
            </Breadcrumb.Item>
          </Breadcrumb>
          <div>
            <Button type='primary' style={{ marginRight: '10px' }} onClick={() => { this.setState({ addFolderVisible: true }) }}>新建文件夹</Button>
            <Upload>
              <Button type='primary'>上传文件</Button>
            </Upload>
          </div>
        </div>
        <Table
          columns={columns}
          dataSource={this.props.data}
          onRow={record => {
            return {
              onClick: event => {
                // 文件夹类型才可点击
                if (record.type === 'folder') {
                  this.setState({
                    folderId: record.id
                  })
                  this.props.listFolderAndFile(record.id)
                }
                
              }, // 点击行
            }
          }}
        />
        <Modal
          title="添加文件夹"
          visible={addFolderVisible}
          onCancel={() => {
            this.setState({
              addFolderVisible: false
            })
          }}
          footer={null}
          destroyOnClose
        >
          <Form onFinish={addFolder}>
            <Form.Item label="文件夹名称" name="folderName" rules={[{ required: true, message: "请输入文件夹名称" }]}>
              <Input></Input>
            </Form.Item>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button type='primary' htmlType='submit' style={{ marginRight: '10px' }}>确认</Button>
              <Button onClick={() => this.setState({ addFolderVisible: false })}>取消</Button>
            </div>
          </Form>
        </Modal>
      </Card>
    )
  }
}

const mapStateToProps = (state) => ({
  data: state.personalFile.data
})

const mapDispatchToProps = (dispatch) => ({
  getRootFolder() {
    dispatch(action.getRootFolder())
  },
  addFolder(data) {
    dispatch(action.addFolder(data))
  },
  deleteFolder(data) {
    dispatch(action.deleteFolder(data))
  },
  listFolderAndFile(data) {
    dispatch(action.listFolderAndFile(data))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(index)